M

MLOG

Latviešu

Apgūstiet CSS konteineru vaicājumus patiesi adaptīvam web dizainam. Uzziniet, kā pielāgot izkārtojumus, pamatojoties uz konteinera, nevis skatloga izmēru, lai nodrošinātu nevainojamu lietotāja pieredzi visās ierīcēs.

Adaptīvā dizaina atslēgšana: Visaptverošs ceļvedis par CSS konteineru vaicājumiem

Gadiem ilgi adaptīvais web dizains galvenokārt balstījās uz mediju vaicājumiem, ļaujot tīmekļa vietnēm pielāgot savu izkārtojumu un stilu, pamatojoties uz skatloga platumu un augstumu. Lai gan šī pieeja ir efektīva, tā dažkārt var šķist ierobežojoša, īpaši strādājot ar sarežģītiem komponentiem, kuriem jāpielāgojas neatkarīgi no kopējā ekrāna izmēra. Iepazīstieties ar CSS konteineru vaicājumiem (CSS Container Queries) – jaudīgu jaunu rīku, kas ļauj elementiem reaģēt uz to ietverošā elementa izmēru, nevis pašu skatlogu. Tas paver jaunu elastības un precizitātes līmeni adaptīvajā dizainā.

Kas ir CSS konteineru vaicājumi?

CSS konteineru vaicājumi ir CSS funkcija, kas ļauj piemērot stilus elementam, pamatojoties uz tā vecākkonteinera izmēru vai citām īpašībām. Atšķirībā no mediju vaicājumiem, kas mērķē uz skatlogu, konteineru vaicājumi mērķē uz konkrētu elementu. Tas ļauj izveidot komponentus, kas pielāgo savu stilu, pamatojoties uz pieejamo vietu to konteinerī, neatkarīgi no ekrāna izmēra.

Iedomājieties kartītes komponentu, kas tiek attēlots atšķirīgi atkarībā no tā, vai tas ir ievietots šaurā sānjoslā vai platā galvenā satura apgabalā. Ar mediju vaicājumiem jums, iespējams, nāktos pielāgot kartītes stilu, pamatojoties uz ekrāna izmēru, kas varētu radīt nekonsekvences. Ar konteineru vaicājumiem jūs varat definēt stilus, kas tiek piemēroti tieši tad, kad kartītes konteiners sasniedz noteiktu platumu, nodrošinot konsekventu un adaptīvu pieredzi dažādos izkārtojumos.

Kāpēc izmantot konteineru vaicājumus?

Konteineru vaicājumi piedāvā vairākas priekšrocības salīdzinājumā ar tradicionālajiem mediju vaicājumiem:

Kā ieviest CSS konteineru vaicājumus

CSS konteineru vaicājumu ieviešana ietver divus galvenos soļus: konteinera definēšanu un vaicājumu rakstīšanu.

1. Konteinera definēšana

Vispirms jums ir jānorāda elements kā konteiners. To dara, izmantojot container-type īpašību. container-type ir divas galvenās vērtības:

Jūs varat arī izmantot container-name, lai piešķirtu savam konteineram nosaukumu, kas var būt noderīgi, lai mērķētu uz konkrētiem konteineriem jūsu vaicājumos. Piemēram:

.card-container {
  container-type: inline-size;
  container-name: cardContainer;
}

Šis kods deklarē elementu ar klasi .card-container kā konteineru. Mēs norādām inline-size, lai atļautu vaicājumus, pamatojoties uz konteinera platumu. Mēs esam tam piešķīruši arī nosaukumu cardContainer.

2. Konteineru vaicājumu rakstīšana

Kad esat definējis konteineru, varat rakstīt konteineru vaicājumus, izmantojot @container at-rule. Sintakse ir līdzīga mediju vaicājumiem:

@container cardContainer (min-width: 400px) {
  .card {
    flex-direction: row;
  }
  .card-image {
    width: 40%;
  }
  .card-content {
    width: 60%;
  }
}

Šis vaicājums piemēro stilus figūriekavās tikai tad, ja konteineram ar nosaukumu cardContainer ir minimālais platums 400px. Tas mērķē uz .card elementu (domājams, ka tas ir .card-container bērns) un pielāgo tā izkārtojumu. Ja konteiners ir šaurāks par 400px, šie stili netiks piemēroti.

Saīsinājums: Jūs varat arī izmantot @container noteikuma saīsināto versiju, kad nav nepieciešams norādīt konteinera nosaukumu:

@container (min-width: 400px) {
  /* Stili, kas jāpiemēro, kad konteiners ir vismaz 400px plats */
}

Konteineru vaicājumu praktiski piemēri

Apskatīsim dažus praktiskus piemērus, kā varat izmantot konteineru vaicājumus, lai izveidotu adaptīvākus un pielāgojamākus izkārtojumus.

1. piemērs: Kartītes komponents

Šis piemērs parāda, kā pielāgot kartītes komponentu, pamatojoties uz tā konteinera platumu. Kartīte attēlos savu saturu vienā kolonnā, kad konteiners ir šaurs, un divās kolonnās, kad konteiners ir platāks.

HTML:


  

    Kartītes attēls
    

      
Kartītes virsraksts

      
Šis ir kartītes satura paraugs.

      Uzzināt vairāk

CSS:

.card-container {
  container-type: inline-size;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

.card {
  display: flex;
  flex-direction: column;
}

.card-image {
  width: 100%;
  height: auto;
}

.card-content {
  padding: 10px;
}

@container (min-width: 500px) {
  .card {
    flex-direction: row;
  }
  .card-image {
    width: 40%;
  }
  .card-content {
    width: 60%;
  }
}

Šajā piemērā .card-container ir deklarēts kā konteiners. Kad konteinera platums ir mazāks par 500px, .card izmantos kolonnas izkārtojumu, novietojot attēlu un saturu vertikāli. Kad konteinera platums ir 500px vai vairāk, .card pārslēgsies uz rindas izkārtojumu, attēlojot attēlu un saturu blakus.

2. piemērs: Navigācijas izvēlne

Šis piemērs demonstrē, kā pielāgot navigācijas izvēlni, pamatojoties uz pieejamo vietu. Kad konteiners ir šaurs, izvēlnes elementi tiks parādīti nolaižamajā sarakstā. Kad konteiners ir platāks, izvēlnes elementi tiks parādīti horizontāli.

HTML:

CSS:

.nav-container {
  container-type: inline-size;
  background-color: #f0f0f0;
  padding: 10px;
}

.nav-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-container li {
  margin-bottom: 5px;
}

.nav-container a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: #333;
}

@container (min-width: 600px) {
  .nav-container ul {
    display: flex;
  }

  .nav-container li {
    margin-right: 10px;
    margin-bottom: 0;
  }

  .nav-container a {
    display: inline-block;
  }
}

Šajā piemērā .nav-container ir deklarēts kā konteiners. Kad konteinera platums ir mazāks par 600px, izvēlnes elementi tiks attēloti kā vertikāls saraksts. Kad konteinera platums ir 600px vai vairāk, izvēlnes elementi tiks attēloti horizontāli, izmantojot flexbox.

3. piemērs: Produktu saraksts

E-komercijas produktu saraksts var pielāgot savu izkārtojumu, pamatojoties uz konteinera platumu. Mazākos konteineros labi derēs vienkāršs saraksts ar produkta attēlu, nosaukumu un cenu. Konteineram kļūstot lielākam, var pievienot papildu informāciju, piemēram, īsu aprakstu vai klientu vērtējumu, lai uzlabotu prezentāciju. Tas arī ļauj veikt detalizētāku kontroli, nekā mērķējot tikai uz skatlogu.

HTML:


  

    Produkts 1
    
Produkta nosaukums 1

    
$19.99

  

  

    Produkts 2
    
Produkta nosaukums 2

    
$24.99

CSS:

.product-listing-container {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
}

.product-item {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #eee;
  padding: 10px;
}

.product-item img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.product-item h3 {
  margin-top: 0;
  font-size: 1.2em;
}

.product-item .price {
  font-weight: bold;
  color: #007bff;
}

@container (min-width: 400px) {
  .product-item {
    width: 50%;
    padding: 15px;
  }
}

@container (min-width: 768px) {
  .product-item {
    width: 33.33%;
  }
}

Šis CSS kods vispirms nosaka `product-listing-container` kā konteineru. Šauros konteineros (mazāk par 400px) katrs produkta elements aizņem 100% platuma. Kad konteiners pārsniedz 400px, produktu elementi tiek izkārtoti divās kolonnās. Pārsniedzot 768px, produktu elementi tiek attēloti trīs kolonnās.

Pārlūkprogrammu atbalsts un polifili

Konteineru vaicājumiem ir labs atbalsts modernajās pārlūkprogrammās, tostarp Chrome, Firefox, Safari un Edge. Tomēr vecākas pārlūkprogrammas tos var neatbalstīt dabiski.

Lai atbalstītu vecākas pārlūkprogrammas, varat izmantot polifilu (polyfill). Populāra opcija ir container-query-polyfill, ko var atrast npm un GitHub. Polifili aizpilda trūkumus neatbalstītām funkcijām, ļaujot jums izmantot konteineru vaicājumus pat vecākās pārlūkprogrammās.

Labākā prakse konteineru vaicājumu izmantošanai

Šeit ir dažas labākās prakses, kas jāpatur prātā, izmantojot konteineru vaicājumus:

Biežākās kļūdas un kā no tām izvairīties

Konteineru vaicājumi pret mediju vaicājumiem: Pareizā rīka izvēle

Lai gan konteineru vaicājumi piedāvā ievērojamas priekšrocības, mediju vaicājumiem joprojām ir sava vieta adaptīvajā dizainā. Šeit ir salīdzinājums, kas palīdzēs jums izlemt, kurš rīks ir labākais dažādām situācijām:

Īpašība Konteineru vaicājumi Mediju vaicājumi
Mērķis Konteinera izmērs Skatloga izmērs
Adaptācija Uz komponentiem balstīta Uz lapu balstīta
Elastība Augsta Vidēja
Koda dublēšanās Zemāka Augstāka
Pielietojuma gadījumi Atkārtoti lietojami komponenti, sarežģīti izkārtojumi Globāli izkārtojuma pielāgojumi, pamata adaptācija

Kopumā izmantojiet konteineru vaicājumus, kad nepieciešams pielāgot komponenta stilu, pamatojoties uz tā konteinera izmēru, un izmantojiet mediju vaicājumus, kad nepieciešams veikt globālus izkārtojuma pielāgojumus, pamatojoties uz skatloga izmēru. Bieži vien labākā pieeja ir abu tehniku kombinācija.

Adaptīvā dizaina nākotne ar konteineru vaicājumiem

Konteineru vaicājumi ir nozīmīgs solis uz priekšu adaptīvajā dizainā, piedāvājot lielāku elastību un kontroli pār to, kā elementi pielāgojas dažādiem kontekstiem. Tā kā pārlūkprogrammu atbalsts turpina uzlaboties, konteineru vaicājumi, visticamāk, kļūs par arvien svarīgāku rīku tīmekļa izstrādātājiem. Tie dod iespēju dizaineriem un izstrādātājiem radīt patiesi adaptīvas un lietotājam draudzīgas tīmekļa vietnes, kas nodrošina nevainojamu pieredzi visās ierīcēs un ekrāna izmēros.

Noslēgums

CSS konteineru vaicājumi ir spēcīgs papildinājums adaptīvā dizaina rīkkopai. Ļaujot elementiem reaģēt uz to ietverošā elementa izmēru, tie nodrošina patiesu uz komponentiem balstītu adaptāciju un paver jaunu elastības un precizitātes līmeni web dizainā. Izprotot, kā efektīvi ieviest un izmantot konteineru vaicājumus, jūs varat izveidot pielāgojamākas, vieglāk uzturamas un lietotājam draudzīgākas tīmekļa vietnes, kas nodrošina labāku pieredzi ikvienam.

Resursi

Adaptīvā dizaina atslēgšana: Visaptverošs ceļvedis par CSS konteineru vaicājumiem | MLOG